<template>
    <div class="container" style="background:white">
      <div class="row">
        <div class="col-md-12">
          <header>
            <h1>微博详情</h1>
          </header>
        </div>
      </div>
      <div class="row">
            <div class="col-md-12">
                <!--导航-->
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#" onclick="location.href='List'">首页</a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li ><a href="#" onclick="location.href='Attention'">关注的人</a></li>
                                <li ><a href="#" onclick="location.href='AddWeibo'">写微博</a></li>
                            </ul>
                            <form class="navbar-form navbar-left" @submit.prevent="findlist(txt)">
                                <div class="form-group">
                                    <input type="text" class="form-control" v-model="txt" placeholder="标题文字">
                                </div>
                                <button type="submit" class="btn btn-default" >搜索</button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                        aria-haspopup="true" aria-expanded="false">我的空间<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" @click="toLoginName(name)">我写的微博</a></li>
                                        <li><a href="#" @click="toMyComment()">我的评论</a></li>
                                        <li><a href="#" @click="toAttention()">我的关注</a></li>

                                    </ul>
                                </li>
                                <li><button type="button" class="btn btn-default navbar-btn">登陆</button></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
                <!--END导航-->
            </div>
        </div>
      <div class="row">
        <!-- 微博详情 -->
        <div class="col-md-9">
          <div class="panel panel-default" style="margin:0px">
            <div class="panel-heading">{{ weiboTitle }}</div>
            <div class="panel-body" style="min-height:200px">
              <p><strong>用户名:</strong> {{ userName }}</p>
              <p><strong>发布时间:</strong> {{ createTime }}</p>
              <p><strong>阅读数:</strong> {{ readCount }}</p>
              <p>{{ weiboContent }}</p>
              <img :src="'src/imgs/' + img" alt="...">
            </div>
          </div>
          <!-- 评论区 -->
          <div class="panel panel-default" style="margin-top:20px">
            <div class="panel-heading">评论区</div>
            <div class="panel-body">
              <!-- 评论列表 -->
              <ul class="list-group">
                <li v-for="(comment, index) in comments" :key="index" class="list-group-item">
                  {{ comment.userName }}: {{ comment.content }}
                </li>
              </ul>
              <!-- 发表评论 -->
              <form @submit.prevent="submitComment">
                <div class="form-group">
                  <div class="col-sm-12">
                    <textarea v-model="commentContent" id="txt" class="form-control" rows="3"></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <button type="submit" class="btn btn-default">提交</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <!-- 右侧布局 -->
        <div class="col-md-3">
          <!-- 个人信息 -->
          <div class="thumbnail">
        <img src="../imgs/7.jpg" alt="..." class="img-circle" width="100px" height="120px" style="float:left;margin:30px 10px">
        <div class="caption text-center">
          <p><strong></strong> {{ userName }}</p>
          <p>发表博文:102</p>
          <p>
            <button @click="handleFollow" class="btn btn-primary" role="button">
              {{ isFollowing ? '取消关注' : '关注' }}
            </button>
          </p>
        </div>
      </div>
          <!-- 排行榜 -->
          <div class="list-group">
            <a href="#" class="list-group-item" style="background:#008;color:white">作者的博客</a>
            <a href="#" class="list-group-item"><span class="badge">20</span>Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item"><span class="badge">30</span>Morbi leo risus</a>
            <a href="#" class="list-group-item"><span class="badge">98</span>Porta ac consectetur ac</a>
            <a href="#" class="list-group-item"><span class="badge">69</span>Vestibulum at eros</a>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { reactive, toRefs } from "vue";
  import { useRoute } from "vue-router";
  import axios from "axios";
  import { onMounted } from 'vue';
  
  export default {
    name: "Detail2",
    setup() {
      const route = useRoute();
      const state = reactive({
        weiboId: route.query.weiboId,
        userName: '',
        weiboTitle: '',
        weiboContent: '',
        createTime: '',
        readCount: 0,
        img: '',
        comments: [],
        commentContent: '',
        pageNum: 1,
        pageSize: 100,
        commentState: 1,
        isFollowing: false // 新增状态用于管理按钮的文本
      });
  
      onMounted(async () => {
        await getWeiboDetails(state.weiboId);
        await getComments(state.weiboId, state.pageNum, state.pageSize, state.commentState);
        // await checkFollowingStatus(); // 检查是否已关注
      });
  
      async function getWeiboDetails(weiboId) {
        try {
          const response = await axios.get("http://localhost:81/xw01/xw-weibo/api/weibo/getWeiboById", {
            params: { weiboId }
          });
          const data = response.data.data;
          state.weiboTitle = data.title;
          state.weiboContent = data.content;
          state.userName = data.userName;
          state.createTime = data.createTime;
          state.readCount = data.readCount;
          state.img = data.img;
          console.log(state.img)

        } catch (error) {
          console.error(error);
        }
      }
  
      async function getComments(wbid, pageNum, pageSize, commentState) {
        try {
          const response = await axios.get("http://localhost:81/xw01/xw-comment/api/comment/showListByWeibo", {
            params: { wbid, pageNum, pageSize, state: commentState }
          });
          state.comments = response.data.data.records;
        } catch (error) {
          console.error(error);
        }
      }
  
      async function submitComment() {
        const user = JSON.parse(sessionStorage.getItem('user'));
        const userloginname = user.loginName;
        const wbid = state.weiboId;
        const content = state.commentContent;
  
        try {
          const response = await axios.get("http://localhost:81/xw01/xw-comment/api/comment/addComment", {
            params: {
              wbid,
              content,
              userloginname
            }
          });
  
          if (response.data.code === 200) {
            alert("评论成功");
            state.comments.push(response.data.data);
            state.commentContent = '';
          } else {
            alert("评论失败: " + response.data.msg);
          }
        } catch (error) {
          console.error(error);
          alert("评论失败: 网络错误或服务器无响应");
        }
      }
  
      // async function checkFollowingStatus() {
      //   const user = JSON.parse(sessionStorage.getItem('user'));
      //   const attentionName = user.loginName;
      //   const userName = state.userName;
  
      //   try {
      //     const response = await axios.get("http://localhost:81/xw01/xw-attention/api/attention/checkFollowingStatus", {
      //       params: { attentionName, userName }
      //     });
      //     if (response.data.code === 200 && response.data.data) {
      //       state.isFollowing = true;
      //     } else {
      //       state.isFollowing = false;
      //     }
      //   } catch (error) {
      //     console.error(error);
      //   }
      // }
  
      async function handleFollow() {
        const user = JSON.parse(sessionStorage.getItem('user'));
        const userName = state.userName; // 获取当前微博作者的用户名
        const attentionName = user.loginName; // 当前登录用户的登录名
  
        try {
          const response = await axios.get("http://localhost:81/xw01/xw-attention/api/attention/addAttention", {
            params: {
              attentionName,
              userName
            }
          });
  
          if (response.data.code === 200) {
            state.isFollowing = !state.isFollowing;
            alert(state.isFollowing ? "关注成功" : "取消关注成功");
            // 可以根据需要更新页面或者执行其他操作
          } else {
            alert("操作失败: " + response.data.msg);
          }
        } catch (error) {
          console.error(error);
          alert("操作失败: 网络错误或服务器无响应");
        }
      }
  
      return {
        ...toRefs(state),
        submitComment,
        handleFollow,
      }
    }
  }
  </script>
  
  
  <style scoped>
  /* Add your styles here */
  </style>
  